<template>
  <view class="page">
    <view class="order">
      <view class="top_info">
        <!-- #ifdef APP-PLUS -->
        <view class="status_bar"></view>
        <!-- #endif -->
        <my-indent title="我的订单"></my-indent>
        <!-- <my-search from="order" :notTop="true" :bgColor="'#fff'"></my-search> -->
        <u-tabs
          :list="stateList"
          :current="tabIndex"
          @change="change"
          bg-color="#fff"
          inactive-color="rgba(0, 0, 0, .75)"
          active-color="#40AE36"
        ></u-tabs>
      </view>
      <view class="all_order">
        <div class="scroll_height">
          <view
            class="sign_order"
            v-for="(item, index) in dataList"
            @click="toDetail(item)"
            :key="index"
          >
            <new-my-order :item="item" @getData="getData(1)"></new-my-order>
          </view>
        </div>
        <!-- <view class="nodata" v-if="dataList.length == 0">
          <image :src="nodataImg" mode="aspectFit"></image>
          <view>暂时还没有此类订单~</view>
        </view> -->
        <view class="nodata" v-if="dataList.length == 0">
          <image
            src="/static/image/nodata.png"
            style="height: 250rpx"
            mode="aspectFit"
          ></image>
          <view class="nodataspan">抱歉，没有找到订单哦</view>
        </view>
      </view>
    </view>
    <u-select
      v-model="show"
      :list="userList"
      @confirm="selectUser"
      value-name="id"
      label-name="nickname"
    >
      <text class="custom-icon custom-icon-yonghu"></text>
    </u-select>

    <my-tabar ref="tabar" current="1"></my-tabar>
  </view>
</template>

<script>
let app = getApp();
// import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
import NewMyOrder from "../../components/new-my-order/index.vue";
export default {
  components: {
    NewMyOrder,
  },
  // computed: {
  //   ...mapState(["companyInfo"]),
  // },
  data() {
    return {
      // nodataImg: getApp().globalData.nodataImg,
      show: false,
      tabIndex: app.globalData.tabIndex,
      stateList: [
        {
          name: "全部",
        },
        {
          name: "待审核",
        },
        {
          name: "备货中",
        },
        {
          name: "配送中",
        },
        {
          name: "已完成",
        },
        { name: "已取消" },
      ],
      userList: [], //用户列表
      userInfo: {
        userId: null, //选择的用户id
        userName: null, //选择的用户名
      },
      dataList: [],
      count: null,
      page: 1,
      // flag: true,
    };
  },
  onReady() {
    getApp().setTitle();
  },
  onShow() {
    if (!uni.getStorageSync("copartner_token")) {
      uni.redirectTo({
        url: "/pages/account/login",
      });
    } else {
      uni.$once("updateorder", (res) => {
        if (res) {
          this.tabIndex = res.id;
          // this.getData(1);
        }
        this.flag = true;
      });
      // if (this.flag) {
      // 如果app.globalData.tabIndex没有值就给0
      this.tabIndex = app.globalData.tabIndex || 0;
      this.getData(1);
      this.$nextTick(() => {
        this.$refs.tabar.changetag(uni.getStorageSync("cartTag"));
      })
      // }
    }
    // this.flag = true;
    // if (app.globalData.tabIndex) {
    //   this.change(app.globalData.tabIndex);
    //   console.log("ooo");
    // }
  },
  methods: {
    // getOrderList() {
    //   $https("GET", "getOrderList", params, (res) => {
    //     console.log("res1", res);
    //     if (res.data.errcode == 0) {
    //     } else {
    //       uni.showToast({
    //         icon: "none",
    //         title: res.data.errmsg,
    //       });
    //     }
    //   });
    // },
    getData(page, change, params) {
      if (page == 1) {
        this.dataList = [];
        this.count = null;
      }
      var params = {
        size: 6,
        page: page,
      };
      if (this.userInfo.userId) {
        Object.assign(params, {
          zid: this.userInfo.userId,
        });
      }
      if (app.globalData.tabIndex != 0) {
        //为0 不传
        Object.assign(params, {
          order_status: app.globalData.tabIndex - 1,
        });
      }
      $https("GET", "getOrderList", params, (res) => {
        if (res.data.errcode == 0) {
          var list = res.data.data.list;
          // console.log("list", list);
          for (let i in list) {
            var ms1 = Number(list[i].created_at + "000");
            list[i].createdTime = this.timestampToDate(ms1);
          }
          if (change) {
            this.dataList = list;
          } else {
            this.dataList = this.dataList.concat(list);
          }

          this.count = res.data.data.count;
          this.page = page;
          this.userList = res.data.data.zi_list ? res.data.data.zi_list : [];
          if (!this.userInfo.userId && this.userList.length > 0) {
            this.userInfo.userName = res.data.data.zi_list[0].nickname;
          }
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },

    timestampToDate(ms) {
      var now = new Date();
      now.setTime(ms);
      var date =
        now.getFullYear() +
        "-" +
        (now.getMonth() + 1) +
        "-" +
        now.getDate() +
        " " +
        now.getHours() +
        ":" +
        now.getMinutes() +
        ":" +
        now.getSeconds();
      return date;
    },

    change(index) {
      app.globalData.tabIndex = index;
      // console.log(app.globalData.tabIndex);
      this.tabIndex = app.globalData.tabIndex;
      this.dataList = [];
      this.count = null;
      this.page = 1;
      this.getData(1);
    },
    //选择用户
    selectUser(data) {
      this.userInfo.userId =
        data[0].value == this.userList[0].id ? null : data[0].value;
      this.userInfo.userName = data[0].label;
      this.getData(1, true);
    },
    //按钮事件
    btnAction(option) {
      var type = option.type,
        id = option.id,
        msg = option.msg;
      if (type == "getOrderDetail") {
        uni.navigateTo({
          url: `/pages/user/return_goods/return_list?id=${id}`,
        });
      }
      if (type == "toPay") {
        uni.navigateTo({
          url: `/pages/shopcart/pay_for?id=${id}`,
        });
      } else if (type == "getLogistics") {
        // #ifdef H5
        uni.navigateTo({
          url: `/pages/order/checkLog-h5?id=${id}`,
        });
        // #endif
        // #ifndef H5
        uni.navigateTo({
          url: `/pages/order/checkLog-wx?id=${id}`,
        });
        // #endif
      } else {
        uni.showModal({
          content: `是否${msg}`,
          confirmColor: "#4FA388",
          success: (res) => {
            if (res.confirm) {
              $https(
                "GET",
                type,
                {
                  oid: id,
                },
                (res) => {
                  if (res.data.errcode == 0) {
                    if (type == "onceAgain") {
                      //如果是再来一单，直接跳转到购物车
                      uni.switchTab({
                        url: "/pages/tabar/shopcart",
                      });
                    } else {
                      this.getData(1);
                    }
                  } else {
                    uni.showToast({
                      title: res.data.errmsg,
                      icon: "none",
                    });
                  }
                }
              );
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },

    toDetail(item) {
      let data = {
        company_logo: item.company_logo,
        company_name: item.company_name,
      };
      sessionStorage.setItem("companyInfo", JSON.stringify(data));
      uni.navigateTo({
        url: `/pages/order/detail?id=${item.id}`,
      });
    },
  },
  onReachBottom() {
    var page = this.page;
    // console.log("1111111");
    if (this.dataList.length < this.count) {
      page++;
      this.getData(page);
    }
  },
};
</script>

<style lang="scss" scoped>
.order .top_info .top_title {
  justify-content: space-between;
  padding: 24rpx 34rpx 14rpx;
  color: black;
  font-weight: bold;
  background-color: #fff;

  .name {
    font-size: 32rpx;
    padding-left: 20rpx;
  }
}

.nodataspan {
  font-size: 32rpx;
  font-family: PingFang SC;
  color: #999999;
}
.order {
  .top_info {
    z-index: 99;
    position: fixed;
    left: 0;
    right: 0;
    // #ifdef APP-PLUS
    top: var(--status-bar-height);
    // #endif
    background: #f6f6f7;
  }

  .all_order {
    //#ifndef MP-WEIXIN
    padding-top: calc(var(--status-bar-height) + 200rpx);
    // #endif
    //#ifdef MP-WEIXIN
    padding-top: 200rpx;
    // #endif
    margin-bottom: 20rpx;
    padding-bottom: 80rpx;
  }

  .success_pay {
    position: absolute;
    font-size: 92rpx;
    color: rgba(255, 0, 0, 0.1);
    transform: rotate(-22deg);
    margin-top: 40rpx;
  }

  .sign_order {
    background: $white;
    width: 690rpx;
    margin: 0 auto;
    border-radius: 20rpx;

    image {
      width: 112rpx;
      height: 80rpx;
      margin-right: 22rpx;
    }

    .order_number {
      height: 64rpx;
      line-height: 64rpx;

      border-bottom: 1px solid #ececec;
    }

    .order_info {
      flex-basis: 100%;

      > view {
        margin: 10rpx 0;
      }
    }
  }

  .sign_order:nth-child(n + 2) {
    margin-top: 20rpx;
  }

  //   .scroll_height {
  //     height: calc(100vh - 50px - 318rpx);
  //     /* #ifdef APP-PLUS */
  //     height: calc(100vh - 50px - 245rpx - var(--status-bar-height));
  //     /* #endif */
  //   }

  .select_button {
    padding: 26rpx 0;

    .another_order,
    .confirm_pay {
      border-color: #55a68c;
      color: #55a68c;
    }

    .look_logist,
    .cancel_order {
      color: #8f8f8f;
    }

    .confirm_good {
      color: #e53131;
    }
  }

  .select_button > text {
    border: 1px solid;
    padding: 8rpx 22rpx;
    margin-left: 24rpx;
    font-size: 24rpx;
    border-radius: 24rpx;
  }
}

.top_title {
  .icon_user {
    width: 26rpx;
    height: 30rpx;
  }

  .icon_right {
    width: 12rpx;
    height: 16rpx;
    margin-left: 10rpx;
  }

  .account {
    margin-left: 10rpx;
  }
}

// @media (max-width: 600px) {
// 	/deep/ .search_style .search {

// 		height: 80rpx;
// 		margin: 28rpx 0 36rpx;
// 	}

// 	.order .order_info>view {
// 		margin-top: 8rpx;
// 	}

// 	.order {
// 		.account {
// 			margin: 0 6rpx;
// 		}

// 		.top_info {
// 			/deep/ .uicon-arrow-right {
// 				height: 38rpx;
// 				line-height: 38rpx;
// 			}
// 		}
// 	}
// }
</style>
